---
type: tutorial
title: 사이트 전체 스타일 추가
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 — 사이트 전체 스타일링을 위한 글로벌 스타일시트 생성
i18nReady: true
---


import Checklist from '~/components/Checklist.astro';
import Spoiler from '~/components/Spoiler.astro';
import Box from '~/components/tutorial/Box.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

이제 스타일이 지정된 정보 페이지가 있으므로 사이트의 나머지 부분에 전역 스타일을 추가할 차례입니다!

<PreCheck>
  - 전역 스타일 적용
</PreCheck>

## 전역 스타일시트 추가

Astro `<style>` 태그가 **기본적으로 범위가 지정**되어 있음을 확인했습니다. 이는 자체 파일의 요소에만 영향을 미친다는 의미입니다.

Astro에서 스타일을 **전역으로** 정의하는 몇 가지 방법이 있지만, 이 튜토리얼에서는 `global.css` 파일을 만들고 각 페이지에 가져옵니다. 스타일시트와 `<style>` 태그의 조합을 사용하면 사이트 전체에서 일부 스타일을 제어하고 일부 특정 스타일을 원하는 위치에 정확하게 적용할 수 있습니다.

<Steps>
1. `src/styles/global.css` 위치에 새 파일을 만듭니다. (먼저 `styles` 폴더를 만들어야 합니다.)

2. 다음 코드를 새 파일 `global.css`에 복사하세요.

    ```css title="src/styles/global.css"
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }
    ```

3. `about.astro`에서 프런트매터에 다음 import 문을 추가하세요.

    ```astro title="src/pages/about.astro" ins={2}
    ---
    import '../styles/global.css';

    const pageTitle = "About Me";

    const identity = {
      firstName: "Sarah",
      country: "Canada",
      occupation: "Technical Writer",
      hobbies: ["photography", "birdwatching", "baseball"],
    };

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Writing Docs"];

    const happy = true;
    const finished = false;
    const goal = 3;

    const skillColor = "crimson";
    const fontWeight = "bold";
    const textCase = "uppercase";
    ---
    ```

4. 정보 페이지의 브라우저 미리보기를 확인하면 이제 새로운 스타일이 적용된 것을 볼 수 있습니다!
</Steps>

<Box icon="puzzle-piece">

## 직접 시도해 보세요 - 전역 스타일시트 가져오기

사이트의 모든 페이지에 전역 스타일을 적용하려면 프로젝트의 각 `.astro` 파일에 필요한 코드 줄을 추가하세요.

<details>
<summary>✅ 코드를 확인하세요! ✅</summary>

다음 import 문을 다른 두 페이지 파일인 `src/pages/index.astro` 및 `src/pages/blog.astro`에 추가합니다.

```astro title="src/pages/index.astro" ins={2}
---
import '../styles/global.css';
---
```
</details>
</Box>

정적 또는 동적으로 페이지 템플릿에 HTML 요소를 추가하여 정보 페이지의 콘텐츠를 변경하거나 추가합니다. HTML에서 사용할 값을 제공하기 위해 프런트맽처 스크립트에 추가 JavaScript를 작성하세요. 이 페이지가 만족스러우면 다음 강의로 넘어가기 전에 변경 사항을 GitHub에 커밋하세요.

<Box icon="question-mark">

### 패턴 분석

여러분의 정보 페이지는 이제 가져온 `global.css` 파일 *및* `<style>` 태그를 *둘 다* 사용하여 스타일이 지정되었습니다.

- 두 스타일링 방법의 스타일이 모두 적용됩니까?

    <p>
      <Spoiler>네, 그렇습니다.</Spoiler>
    </p>

- 상충되는 스타일이 있나요? 그렇다면 어떤 스타일이 적용되나요?

    <p>
      <Spoiler>네, `<h1>`의 크기는 전체적으로 `2.5rem`이지만 `<style>` 태그에서는 로컬로 `4rem`입니다. 정보 페이지에는 로컬 '4rem' 규칙이 적용됩니다.</Spoiler>
    </p>

- `global.css`와 `<style>`이 어떻게 함께 작동하는지 설명하세요.

    <p>
      <Spoiler>전역 스타일과 페이지의 로컬 `<style>` 태그 모두에서 충돌하는 스타일이 정의된 경우 로컬 스타일이 모든 전역 스타일을 덮어써야 합니다. (그러나 다른 요인도 있을 수 있으므로 항상 사이트를 직접 검사하여 스타일이 제대로 적용되었는지 확인하세요!)</Spoiler>
    </p>

- `global.css` 파일 또는 `<style>` 태그에서 스타일을 선언할지 어떻게 선택하시겠습니까?

    <p>
      <Spoiler>사이트 전체에 스타일을 적용하려면 `global.css` 파일을 사용하도록 선택합니다. 그러나 스타일을 단일 `.astro` 파일의 HTML 콘텐츠에만 적용하고 사이트의 다른 요소에는 영향을 주지 않으려면 `<style>` 태그를 선택합니다.</Spoiler>
    </p>

</Box>

<Box icon="check-list">
## 체크리스트

<Checklist>
- [ ] `.css` 파일을 가져와 전역 CSS 스타일을 추가할 수 있습니다.
</Checklist>
</Box>

### 참고 자료

- [Astro 구문과 JSX - 비교](/ko/reference/astro-syntax/#astro와-jsx의-차이점)

- [Astro `<style>` 태그](/ko/guides/styling/#astro에서-스타일링하기)

- [Astro의 CSS 변수](/ko/guides/styling/#css-변수)
